<template>
  <div class="boxContent">
    <div class="d_h_slot">
      <div class="head">{{$t("home.myWorkData")}}</div>
      <div class="content">
        <div class="myWork">
          <div class="label d_h_col">{{$t("home.myWork")}} :</div>
          <div class="select d_h_col">
            <el-select v-model="bookId" @change="selectedBook" :placeholder="$t('home.pleaseSelect')">
              <el-option
                v-for="item in bookList"
                :key="item.bookId"
                :label="item.bookTitle"
                :value="item.bookId"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="date-box">
          <div class="label">{{$t("home.date")}} :</div>
          <div class="select-date">
            <!-- 开始日期 -->
            <el-select v-model="startDate.month" :placeholder="$t('home.selectMonth')">
              <el-option
                v-for="item in months"
                :key="item.label"
                :label="item.label"
                :value="item.value"
                value-format="MM">
              </el-option>
            </el-select>
            <el-select v-model="startDate.day" :placeholder="$t('home.selectDay')">
              <el-option
                v-for="item in startDayList"
                :key="item"
                :label="item"
                :value="item"
                value-format="dd">
              </el-option>
            </el-select>
            <el-date-picker
              v-model="startDate.year"
              type="year"
              value-format="yyyy"
              :placeholder="$t('home.selectYear')">
            </el-date-picker>
            <!-- 结束日期 -->
            <el-select v-model="endDate.month" :placeholder="$t('home.selectMonth')">
            <el-option
                v-for="item in months"
                :key="item.label"
                :label="item.label"
                :value="item.value"
                value-format="MM">
              </el-option>
            </el-select>
            <el-select v-model="endDate.day" :placeholder="$t('home.selectDay')">
              <el-option
                v-for="item in endDayList"
                :key="item"
                :label="item"
                :value="item"
                value-format="dd">
              </el-option>
            </el-select>
            <el-date-picker
              v-model="endDate.year"
              type="year"
              value-format="yyyy"
              :placeholder="$t('home.selectYear')">
            </el-date-picker>
          </div>
          <div class="confirm">
            <el-button @click="searchBook" :disabled="disabledBtn" type="primary">{{$t("home.search")}}</el-button>
          </div>
        </div>
        <div class="data-box">
          <ul class="data-list">
            <li :data-content="tranNumber(bookData.createWords,2)">Number of words created</li>
            <li :data-content="tranNumber(bookData.subscribeUser,2)">Number of subscribers</li>
            <li :data-content="tranNumber(bookData.showSubCoinSum,2)">Total Coins income</li>
            <li :data-content="tranNumber(bookData.showRewardCoinSum,2)">Total Coins reward income</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  signBookList,
  signBookData,
} from "@/api/authorCenter/workData";
export default {
  name: "dashboard",
  data() {
    return {
      bookId: "", //选择的作品id
      bookList: [
        {
          bookId: "",
          bookTitle: "All Works",
        },
      ],
      bookData: {}, //搜索结果
      startDate:{
        year: "",
        month: "",
        day: "All"
      }, //开始日期
      endDate:{
        year: "",
        month: "",
        day: "All"
      }, //结束日期
      // 月份
      months:[
        {
          label: "All",
          value: "",
        },
        {
          label: "January",
          value: "01",
        },
        {
          label: "February",
          value: "02",
        },
        {
          label: "March",
          value: "03",
        },
        {
          label: "April",
          value: "04",
        },
        {
          label: "May",
          value: "05",
        },
        {
          label: "June",
          value: "06",
        },
        {
          label: "July",
          value: "07",
        },
        {
          label: "August",
          value: "08",
        },
        {
          label: "September",
          value: "09",
        },
        {
          label: "October",
          value: "10",
        },
        {
          label: "November",
          value: "11",
        },
        {
          label: "December",
          value: "12",
        },
      ],
    }
  },
  computed: {
    // 计算当前月份天数
    startDayList(){
      let arr = ["All"];
      let list = new Date(this.startDate.year, this.startDate.month ? this.startDate.month : "01", 0).getDate();
      for(let i = 1; i <= list; i++){
        arr[i] = i
      }
      if(this.startDate.day > list) {
        this.startDate.day = list;
      }
      return arr;
    },
    endDayList(){
      let arr = ["All"];
      let list = new Date(this.endDate.year, this.endDate.month ? this.endDate.month : "01", 0).getDate();
      for(let i = 1; i <= list; i++){
        arr[i] = i
      }
      if(this.endDate.day > list) {
        this.endDate.day = list;
      }
      return arr;
    },
    disabledBtn(){
      if(this.startDate.year && this.endDate.year) {
        return false;
      } else {
        return true;
      }
    }
  },
  mounted(){
	  this.getList();
    this.getCurrentTime()
  },
  methods: {
    //获取当前时间
    getCurrentTime() {
         let currentTime = new Date(), year = currentTime.getFullYear();
         this.endDate.year = year + '';
         this.startDate.year = year - 1 + '';
    },
    filterDate(str){
      if(str == "" || str == "All" || str == "all") {
        return "-01";
      } else {
        return `-${str}`
      }
    },
    tranNumber(num, point) {
      if (!num) return "0";
      let numStr = num.toString();
      // 一千以内直接返回
      if (numStr.length < 4) {
        return numStr;
      }
      // 大于一千   13400
      else if (numStr.length >= 4) {
        let decimal = numStr.substring(
          numStr.length - 3,
          numStr.length - 3 + point
        );
        return parseFloat(parseInt(num / 1000) + "." + decimal) + "K";
      }
    },
	  //搜索
	  searchBook(){
      let params = {
        bookId: this.bookId,
        endTime: this.endDate.year + this.filterDate(this.endDate.month) + this.filterDate(this.endDate.day),
        startTime: this.startDate.year + this.filterDate(this.startDate.month) + this.filterDate(this.startDate.day)
      }
      signBookData(params).then((res) => {
        if(res.code === 1) {
          this.bookData = res.source;
        }
      })
	  },
	  selectedBook(res){//选中作品
		// this.selectClass = res
		// this.pageMess.bookId = res
	  },
    getList() {
      //默认页面数据获取
      signBookList().then((res) => {
        this.bookList = this.bookList.concat(res.source);
      });
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.boxContent{
  padding-top: 20px;
  padding: 20px;
}
.content {
  .label {
    min-width: 80px;
    margin-right: 20px;
    text-align: right;
  }
  .myWork {
    display: flex;
    flex-direction: row;
    margin: 15px 0;
    margin-bottom: 35px;
    .select {
      flex: 1;
    }
  }
  .date-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .select-date{
      .el-select,.el-date-editor{
        width: 110px;
        margin-right: 10px;
      }
    }
  }
  .data-box {
    margin-top: 40px;
    ul.data-list{
      display: flex;
      justify-content: space-between;
      li{
        width: 210px;
        height: 100px;
        padding: 20px 5px;
        display: flex;
        font-size: 14px;
        box-sizing: border-box;
        justify-content: space-between;
        flex-direction: column;
        text-align: center;
        border-radius: 12px;
        background-color: rgba(129, 211, 248, 0.435294117647059);
        &::before{
          content: attr(data-content);
          display: block;
          font-weight: bold;
          font-size: 24px;
          word-break: break-all;
        }
      }
    }
  }
}
</style>
